<template>
  <div>
    <crumb isShowBack/>
    <div class="course-study main-contianer2">
      <div class="right-content">
        <el-form style="margin: 20px 20px 0 20px;">
          <el-form-item label="选择日期：">
            <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getHistoryOnlineLessonList"></el-date-picker>
          </el-form-item>
        </el-form>
        <div class="online-box" v-for="item in list" :key="item.id">
          <div class="online-left">
            <div class="online-title">课题：{{item.resourceLessonName}}</div>
            <div class="online-item">课程：{{item.lessonProject}}</div>
            <div class="online-item">主讲：{{item.teacherName}}</div>
            <div class="online-item">班级：{{item.classNames}}</div>
            <div class="online-item">时间：{{formatDate(item.onlineLessonStartTime)}} - {{formatDate(item.onlineLessonEndTime)}}</div>
          </div>
          <div class="online-right">
            <div class="online-tag2">已完成</div>
            <el-button type="primary" @click="getHistoryOnlineLessonStatInfo(item)">查看数据</el-button>
          </div>
        </div>
      </div>
      <div class="left-list">
        <div class="online-historyBox" v-if="onlineLesson&&info">
          <div class="online-title">课题：{{onlineLesson.resourceLessonName || '-'}}</div>
          <div class="online-item">课程：{{onlineLesson.lessonProject || '-'}}</div>
          <div class="online-item">主讲：{{onlineLesson.teacherName || '-'}}</div>
          <div class="online-item">班级：{{onlineLesson.classNames || '-'}}</div>
          <div class="online-item">人数：{{onlineLesson.studentNum || '-'}}人</div>
          <div class="online-item">时间：{{formatDate(onlineLesson.onlineLessonStartTime) || '-'}} - {{formatDate(onlineLesson.onlineLessonEndTime) || '-'}}</div>
          <div class="online-historyCon">
            <div class="online-historyCont">
              <div class="online-historyKey">互动活动</div>
              <div class="online-historyKey">{{info.activityNum >= 0 ? info.activityNum : '-'}}项</div>
            </div>
            <div class="online-historyCont">
              <div class="online-historyKey">参与</div>
              <div class="online-historyKey">{{info.participateNum >= 0 ? info.participateNum : '-'}}项</div>
            </div>
            <div class="online-historyCont">
              <div class="online-historyKey">没参与</div>
              <div class="online-historyKey">{{info.noParticipateNum >= 0 ? info.noParticipateNum : '-'}}项</div>
            </div>
            <div class="online-historyCont">
              <div class="online-historyKey">参与度</div>
              <div class="online-historyKey">{{info.participateRate >= 0 ? info.participateRate + '%' : '-'}}</div>
            </div>
          </div>
          <div class="online-title">互动活动明细</div>
          <el-table :data="info.displayJson" border style="width: 100%">
            <el-table-column prop="date" label="互动类型" width="140">
              <template slot-scope="scope">
                <span v-if="scope.row.type === '1'">点名签到</span>
                <span v-if="scope.row.type === '3'">即时测验</span>
                <span v-if="scope.row.type === '4'">分享展示</span>
              </template>
            </el-table-column>
            <el-table-column prop="studentNum" label="总人数" width="140">
            </el-table-column>
            <el-table-column prop="studentInNum" label="参与人数" width="140">
            </el-table-column>
            <el-table-column prop="rate" label="参与度">
              <template slot-scope="scope">
                <span>{{scope.row.rate >= 0 ? scope.row.rate + '%' : '-'}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHistoryOnlineLessonList, getHistoryOnlineLessonStatInfo } from '@/api/teacher/onlineCourse'
export default {
  data () {
    return {
      date: undefined,
      onlineLesson: undefined,
      info: undefined,
      list: []
    }
  },
  methods: {
    async getHistoryOnlineLessonList () {
      const data = {
        startDate: this.date[0],
        endDate: this.date[1]
      }
      const res = await getHistoryOnlineLessonList(data)
      if (res.code === '200') {
        this.list = res.list
      }
    },
    async getHistoryOnlineLessonStatInfo (item) {
      this.onlineLesson = item
      const res = await getHistoryOnlineLessonStatInfo({ onlineLessonId: item.onlineLessonId })
      if (res.code === '200') {
        this.info = res.data
      }
    },
    formatDate (nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .course-study {
    height: 937px;
    width: 1200px;
    margin: 0 auto;
    .left-list {
      width: 590px;
      height: 100%;
    }
    .right-content {
      width: 590px;
      height: 100%;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      overflow-y: scroll;
    }
  }
</style>
